<template>
	<view class="report-bg-content" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/reportBg.png)'}]">
		<cu-custom :isBack="true" style="background-color: transparent;">
			<block slot="backText" ></block>
			<block slot="content">
				<view class="custom-title">用户报告</view>
			</block>
		</cu-custom>
		<view class="padding-left-xl">
			<view class="score-content" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/scoreBg.png)'}]">
				<view class="score-text">得分</view>
			</view>
			<view class="score">60.2</view>
			<view class="padding-top-38 flex">
				<view class="flex-sub">
					<view class="score-title">某某市最高分</view>
					<view class="score-max-num">100</view>
				</view>
				<view class="flex-sub">
					<view class="score-title">得分排名</view>
					<view class="score-max-num">10,000/976,807</view>
				</view>
			</view>
		</view>
		
		<view class="padding-left-32 padding-right-32">
			<view class="report-center-content" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/reportCenterBg.png)'}]">
				<view class="flex align-start">
					<view class="">
						<view :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/avatar.png)'}]" class="img-96-bg"></view>
						<view class="user-role">
							辅导员
						</view>
					</view>
					<view class="padding-left-36 padding-top-12 text-black text-bold-600">
						达到90分，离节能减排更进一步，<text class="text-4690F7">常识判断</text>要进一步提高哦！
						<button class="cu-btn learn-more-btn">了解更多节能减排知识</button>
					</view>
				</view>
			</view>
			
			<view class="nlfx-content">
				<view class="nlfx-title">能力分析</view>
				<rCharts></rCharts>
				
			</view>
			
			<button class="sure-btn cu-btn">确定</button>
		</view>
		
	</view>
</template>

<script>
	import rCharts from '@/components/charts/reportCharts.vue'
	export default {
		components:{rCharts},
		data() {
			return {
			}
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>

<style scoped lang="less">
	.report-bg-content{
		background-size: 100% 100%;
		width: 100%;
		height: 1952rpx;
		.score-content{
			margin-top: 158rpx;
			background-size: 100% 100%;
			height: 84rpx;
			width: 180rpx;
			text-align: center;
			.score-text{
				padding-top: 12rpx;
				font-size: 34rpx;
				font-weight: 600;
				color: #fff;
			}
		}
		.score{
			font-size: 100rpx;
			font-weight: 600;
			color: #000000;
			padding-top: 28rpx;
		}
		.score-title{
			font-size: 28rpx;
			font-weight: 500;
			color: #666666;
		}
		.score-max-num{
			padding-top: 16rpx;
			font-size: 40rpx;
			font-weight: 600;
			color: #000000;
		}
		.report-center-content{
			margin-top: 42rpx;
			background-size: 100% 100%;
			width: 100%;
			height: 280rpx;
			padding: 32rpx 36rpx;
			.img-96-bg{
				background-size: 100% 100%;
				width: 96rpx;
				height: 96rpx;
				border-radius: 100%;
			}
			.user-role{
				margin-top: -20rpx;
				max-width: 104rpx;
				height: 32rpx;
				background: #8C8FA0;
				border-radius: 40rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #FFFFFF;
				z-index: 99999 !important;
				text-align: center;
			}
			.learn-more-btn{
				margin-top: 58rpx;
				padding: 0 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #4690F7;
				border-radius: 48rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		.nlfx-content{
			margin-top: 32rpx;
			background: #FFFFFF;
			border-radius: 48rpx;
			padding: 32rpx;
			.nlfx-title{
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}
		}
		.sure-btn{
			margin-top: 86rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #24458E;
			box-shadow: 0px 6rpx 16rpx 0px rgba(0,0,0,0.2);
			border-radius: 48rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			width: 100%;
		}
	}
</style>